<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="my.css" />
<style>
div {
	border: 1px solid #a1a1a1;
	padding: 10px 40px;
	background: #dddddd;
	#width: 400px;
	border-radius: 15px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#draggable {
	width: 225px;
	height: 210px;
	padding: 0.5em;
}
</style>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
	$(function() {

		$("#draggable").draggable();

	});
	window.onload = function() {
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		var imageObj = new Image();
		imageObj.onload = function() {
			str = "P-HUB!";
			context.drawImage(imageObj, 1, 1);
			context.fillStyle = "#A9AAAB";
			context.fillRect(55, 110, 100, 20);
			context.fillStyle = "#191919";
			context.font = "12pt Calibri";

			//formula 
			context.fillText("P-HUB!", 60, 120);
			
			context.fillStyle = "#121212";
			context.fillText("P-HUB!", 100, 150);

		};
		//image : 220x145
		imageObj.src = "images/1_220x145.png";
	};
</script>
</head>
<body>

	<div id="draggable" class="ui-widget-content">
		<canvas id="myCanvas" width="328" height="205"></canvas>
	</div>

</body>
</html>
<!-- -
image size : 220x145
div size : 225x210
inner text position: 100, 100
outer text position:
 -->